{extend name="base" /}

{block name="title"}日志管理{/block}

{block name="body"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">操作账号</label>
                        <div class="layui-input-inline">
                            <input name="username" class="layui-input" autocomplete="off" placeholder="请输入操作账号"/>
                        </div>
                    </div>
                    <div class="layui-inline">&emsp;
                        <button class="layui-btn icon-btn" lay-filter="mxTbSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="mxTable" lay-filter="mxTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="mxTbBar">
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
</script>
{/block}

{block name="script"}
<script>
    layui.use(['layer', 'form', 'table', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;

        /* 渲染表格 */
        var insTb = table.render({
            elem: '#mxTable',
            url: "{:url('mxadmin/oplog/datalist')}",
            page: {limit: 15},
            limits: [15, 30, 45, 60, 75, 90, 100, 200, 500],
            toolbar: ['<p>',
                '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>批量删除</button>&nbsp;',
                '<button lay-event="delall" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe756;</i>一键清空</button>',
                '</p>'].join(''),
            cellMinWidth: 100,
            cols: [[
                {type: 'checkbox'},
                {field: 'node', title: '操作权限', templet: '<div><p style="color: #009688">操作账号：{{d.username}}</p><p style="color: #999999">操作节点：{{d.node}}</p></div>'},
                {field: 'action', title: '操作行为', templet: '<div><p style="color: #009688">{{d.action}}</p><p style="color: #999999">{{d.content}}</p></div>'},
                {field: 'geoip', title: '地址位置', templet: '<div><p style="color: #009688">{{d.geoip}}</p><p style="color: #999999">{{d.isp}}</p></div>'},
                {field: 'create_time', title: '操作时间', align: 'center', sort: true},
                {title: '操作', toolbar: '#mxTbBar', align: 'center', minWidth: 180}
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
        });

        /* 表格搜索 */
        form.on('submit(mxTbSearch)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}, url:"{:url('mxadmin/oplog/serach')}"});
            return false;
        });

        /* 表格操作列点击事件 */
        table.on('tool(mxTable)', function (obj) {
            if (obj.event === 'del') { // 删除
                doDel(obj);
            }
        });

        /* 表格头工具栏点击事件 */
        table.on('toolbar(mxTable)', function (obj) {
            if (obj.event === 'delall') { // 删除所有
                doDelAll();
            } else if (obj.event === 'del') { // 删除
                var checkRows = table.checkStatus('mxTable');
                if (checkRows.data.length === 0) {
                    layer.msg('请选择要删除的数据', {icon: 5, anim: 6});
                    return;
                }
                var ids = checkRows.data.map(function (d) {
                    return d.id;
                });
                doDel({ids: ids});
            }
        });

        /* 删除所有 */
        function doDelAll() {
            layer.confirm('确定要删除所有的数据吗？', {
                title: '删除数据',
                skin: 'layui-layer-admin',
                shade: 0.5,
                shadeClose: true,
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
                $.post("{:url('mxadmin/oplog/delall')}", function (res) {
                    layer.close(loadIndex);
                    if (res.code === 1) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload();
                    } else {
                        layer.msg(res.msg, {icon: 5, anim: 6});
                    }
                }, 'json');
            });
        }

        /* 删除 */
        function doDel(obj) {
            layer.confirm('确定要删除选中数据吗？', {
                title: '删除数据',
                skin: 'layui-layer-admin',
                shade: 0.5,
                shadeClose: true,
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
                $.post("{:url('mxadmin/oplog/del')}", {
                    id: obj.data ? obj.data.id : '',
                    ids: obj.ids ? obj.ids.join(',') : ''
                }, function (res) {
                    layer.close(loadIndex);
                    if (res.code === 1) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload();
                    } else {
                        layer.msg(res.msg, {icon: 5, anim: 6});
                    }
                }, 'json');
            });
        }
    });
</script>
{/block}
